import { Col, Row } from "antd";
import React from "react";
import { cutArray } from "../../utils";

interface Props {
    children: Array<React.ReactNode>
    keyName: string
    column?: 1 | 2 | 3 | 4
}

const FormRow: React.FC<Props> = ({ children, keyName, column = 4 }) => {
    const loop = cutArray(children, column)
    return <>
        {
            loop.map((sub, i) => {
                return <Row gutter={1} key={`${keyName}_Row_${i}`}>
                    {
                        sub.map((item, j) => {
                            return <React.Fragment key={`${keyName}_Container_${j}`}>
                                <Col key={`${keyName}_Col_${j}`} span={(24 / column) - 1} >
                                    {item}
                                </Col>
                                <Col key={`${keyName}_Col_${j}_space`} span={1} />
                            </React.Fragment>
                        })
                    }
                </Row>
            })
        }
    </>
}


export default FormRow


